<template>
<q-layout view="hHh Lpr fFf">
    <!-- Be sure to play with the Layout demo on docs -->

    <!-- (Optional) The Header -->
    <q-header :class="isShow?'back-dark shadow-7':'transparent'">
        <q-toolbar class="transparent " style="width: 100%; height: 50px">
            <q-btn @click="handleBack" flat round icon="mdi-keyboard-backspace"></q-btn>
            <!-- <q-img v-if="isShow" src="icons/一方映画logo200708竖版亮色.png" :width="$q.platform.is.mobile ? '150px' : '200px'" contain /> -->
            <q-space></q-space>

            <q-tabs dense shrink stretch v-model="tab" class="text-grey  shadow-7 full-height" active-color="primary" indicator-color="primary" inline-label align="justify" narrow-indicator @input="handleTabChange">
                <q-tab name="library" label="音乐库" icon="mdi-music-box-multiple-outline" />
                <q-tab name="collection" label="项目" icon="mdi-music-note-plus" />
                <q-tab name="like" label="喜欢" icon="mdi-heart-outline" />
            </q-tabs>

            <q-space></q-space>

            <q-btn flat dense :class="isShow?'':'shadow-7'" icon="mdi-format-list-bulleted" @click="leftDrawer = !leftDrawer" />
            <!-- <q-bar dark style="height: 60px" class="transparent">

                    <q-space />

                    <q-btn flat dense  @click="handleMinWin" :class="isShow?'':'shadow-7'" icon="mdi-minus" class="items-center">

                        <q-tooltip>窗口还原(Esc)</q-tooltip>
                    </q-btn>
                    <q-btn flat dense :class="isShow?'':'shadow-7'"  icon="crop_square" @click="handleMaxWin">
                        <q-tooltip>窗口最大化</q-tooltip>
                    </q-btn>
                    <q-btn flat dense :class="isShow?'':'shadow-7'"  icon="mdi-format-list-bulleted" @click="leftDrawer = !leftDrawer" />

                </q-bar> -->
            <!-- <q-btn flat round dense icon="menu" class="mobile-only q-mr-sm" /> -->
        </q-toolbar>
    </q-header>
    <q-drawer @show="handleChildPageWidth" @hide="handleChildPageWidth" v-model="leftDrawer" :overlay="!$platform.inDesktop()" :width="300" :breakpoint="100" side="left" class="shadow-7" content-class="bg-dark " :behavior="!$platform.inDesktop()?'mobile':'default'">
        <!-- QScrollArea is optional -->
        <q-scroll-area style="height: calc(100% - 80px); margin-top: 80px" :thumb-style="{
            right: '4px',
            borderRadius: '5px',
            backgroundColor: '#009688',
            width: '5px',
            opacity: 0.75,
          }" :bar-style="{
            right: '2px',
            borderRadius: '9px',
            backgroundColor: '#03a9f4',
            width: '9px',
            opacity: 0.2,
          }" class="q-px-md ">

        </q-scroll-area>
        <q-card flat class="absolute-top transparent q-py-sm q-px-md q-mt-md" style="height: 80px">
            <div class="bg-transparent row justify-between">
                <div v-if="tab=='library'" class="text-weight-bold text-h6">
                    类型
                    <q-btn flat round size="15px" dense icon="list" @click="leftDrawer = !leftDrawer" />
                </div>
                <div v-if="tab=='collection'" class="text-weight-bold text-h6">
                    项目收藏
                    <q-btn flat round size="15px" dense icon="list" @click="leftDrawer = !leftDrawer" />
                </div>
                <div v-if="tab=='like'" class="text-weight-bold text-h6">
                    我的喜欢
                    <q-btn flat round size="15px" dense icon="list" @click="leftDrawer = !leftDrawer" />
                </div>

            </div>
            <q-separator color="grey-7" class="q-my-md"></q-separator>

        </q-card>

    </q-drawer>
    <!-- (Optional) The Footer -->
    <q-footer class="row back-dark shadow-up-7 items-center" :style="$platform.inDesktop()?'height:50px':'height:90px'">
        <!-- <q-btn flat round size="15px" dense icon="list" @click="leftDrawer = !leftDrawer" /> -->
        <div id="MusicContainer" v-show="$platform.inDesktop()"></div>
        <div v-show="!$platform.inDesktop()" class="column full-width">

            <div class="row flex-center">
                <q-btn flat @click="handleBackward" icon="mdi-skip-backward"></q-btn>
                <q-btn flat @click="handlePrev" icon="mdi-skip-previous"></q-btn>
                <q-btn dense round outline color="primary" @click="handlePlay" :icon="isPlay?'mdi-pause':'mdi-play'"></q-btn>
                <q-btn flat @click="handleNext" icon="mdi-skip-next"></q-btn>
                <q-btn flat @click="handleForward" icon="mdi-skip-forward"></q-btn>
            </div>
            <div class="q-px-md q-mx-sm row no-wrap items-center">

                <q-slider @change="handleSeek" v-model="curTime" :min="0" :max="durationNum" />
                <div class="row no-wrap q-ml-sm">
                    <div>{{ currentTime }}</div>
                    <div>/{{ duration }}</div>
                </div>
            </div>

        </div>
    </q-footer>

    <q-page-container class="bg-grey-10">

        <!-- This is where pages get injected -->
        <router-view ref="MusicListContainer" :dataCount.sync="dataCount" :typeOptions="typeList" :isPlay="isPlay" @update="handleMusicPlayer" :curTab.sync="tab" @player="handlePlayer" :user="user" :isShow="isShow" />
    </q-page-container>

</q-layout>
</template>


<script>
import 'xgplayer';
import Music from 'xgplayer-music';
import {
    getSeconds
} from "assets/utils/stodate";
import {
    loadMusicType,
} from "assets/api/studio/music"
export default {
    name: 'MusicLayout',

    props: {
        user: {
            type: Object
        }
    },
    data() {
        return {
            leftDrawer: false,
            pid: '',
            isUploadDialog: false,
            uploadheaders: {},
            recceList: [],
            isFull: false,
            isShow: true,
            fileNum: 0,
            isPlay: false,
            duration: '00:00',
            currentTime: '00:00',
            curTime: 0,
            durationNum: 100,
            typeList: [],
            curType: 'all',
            isLibrary: true,
            curItem: {},
            searchName: '',
            isSearch: false,
            tab: 'library',
            curCollectionFolder: 'all',
            dataCount: 0

        }
    },
    created() {
        if (this.$platform.inDesktop()) {
            this.leftDrawer = true;
        };
        this.pid = this.$route.params.pid;

        this.projectInfo = this.$storage.getItem(this.pid);
        this.handleLoadMusicType()
        // console.log(projectInfo);
    },
    mounted() {
        this.$emit('isSingle', true)
        this.i_name = setInterval(() => {
          this.projectInfo = this.$store.state.projectinfo;
            if (this.projectInfo.name) {
                document.title = this.projectInfo.name + '--语音识别';
                clearInterval(this.i_name)
            }

        }, 500);
    },
    watch: {
        '$q.fullscreen.isActive'(val) {
            // if (val) {
            //     this.isShow = false;
            // } else {
            //     this.isShow = true;
            // }

            console.log(val ? 'In fullscreen now' : 'Exited fullscreen')
        }
    },
    beforeDestroy() {
        this.$emit('isSingle', false)
    },
    methods: {
        handleChildPageWidth() {
            this.$refs.MusicListContainer.handlePageWidth()
        },

        handleTabChange(val) {
            console.log('tabchange', val);
            if (val == 'collection') {
                this.$refs.MusicListContainer.handleLoadCollectionList()
            }
            if (val == "library") {
                if (this.curType == 'all') {
                    this.$refs.MusicListContainer.handleLoadMusicList()
                } else {
                    this.$refs.MusicListContainer.handleLoadMusicByType(this.curType)
                }

            }
        },

        handleTypeSelect(type, item) {

            this.$refs.MusicListContainer.handlePageNumReset();
            if (type == 'all') {
                this.curType = 'all'
                console.log('jiazaiall');
                this.$refs.MusicListContainer.curMusicType = '';
                this.$refs.MusicListContainer.curMusicTypeName = '';
                this.$refs.MusicListContainer.handleLoadMusicList()
            } else {
                this.curType = item.en_name;
                this.$refs.MusicListContainer.curMusicType = item.en_name;
                this.$refs.MusicListContainer.curMusicTypeName = item.name;
                this.$refs.MusicListContainer.handleLoadMusicByType(item.en_name)
            }

        },
        handleLoadMusicType() {
            loadMusicType().then(res => {
                console.log(res, '音乐类型');
                if (res.data.code == 1) {
                    this.typeList = res.data.data
                }
            })
        },
        loadMusicPlayer(musicList) {
            this.player = new Music({
                id: 'MusicContainer',
                url: musicList,
                volume: 0.8,
                width: '100%',
                volumeShow: true,
                height: 50,
                timeScale: 10,
                preloadNext: true,
                switchKeepProgress: false,
                // abCycle: {
                //     start: 3,
                //     end: 9,
                //     loop: true
                // }
            })
            var vm = this;
            this.player.on('play', function () {
                vm.isPlay = true;
                console.log(vm.player);
                vm.$refs.MusicListContainer.changeSelectedItem(vm.player.vid);
                vm.$refs.MusicListContainer.nameScroll = true;

            })
            this.player.on('pause', function () {
                vm.isPlay = false;
                vm.$refs.MusicListContainer.nameScroll = false;

            })
            this.player.on('next', function () {
                console.log('下一首');
            })
            this.player.on('timeupdate', function () {

                vm.currentTime = getSeconds(vm.player.currentTime)
                if (vm.player.duration > 0) {
                    vm.duration = getSeconds(vm.player.duration)
                    if (vm.curItem.vid && !vm.player.list[vm.player.index].duration) {
                        vm.player.list[vm.player.index].duration = vm.player.duration
                        vm.$refs.MusicListContainer.handleUpdateDuration(vm.player.duration, vm.player.vid)

                    }

                    vm.durationNum = vm.player.duration
                    vm.curTime = vm.player.currentTime;

                } else {
                    vm.duration = "00:00"
                }

            })
        },
        handlePlay() {
            if (this.isPlay) {
                this.player.pause();

                this.isPlay = false;
            } else {

                this.player.play();

                this.isPlay = true;
            }
        },
        handlePrev() {
            this.player.prev()
        },
        handleNext() {
            this.player.next()
        },
        handleBackward() {
            this.player.backward()
        },
        handleForward() {
            this.player.forward()
        },
        handleSeek(val) {
            console.log(val, '滑块');
            this.player.currentTime = val
        },
        handlePlayer(type, val, music_id, item) {
            console.log(type, val);
            if (type == "setIndex") {
                console.log(item, this.player);
                this.curItem = item
                if (music_id == this.player.vid) {
                    this.handlePlay()
                } else {
                    this.player.setIndex(val)
                }

            }
        },
        handleMusicPlayer(data) {
            if (this.player) {
                this.player.list = data
            } else {
                this.loadMusicPlayer(data)
            }

        },
        handleFileNum(val) {
            this.fileNum = val
        },
        handleBack() {
            this.$router.replace('/studio/' + this.pid)
        },
        loadRecce(item) {
            console.log(this.$refs.recceContainer, item);
            let serverurl = this.GLOBAL.serveurl;

        },
        handleMinWin() {
            // this.isShow = false;
            this.$q.fullscreen
                .exit()
                .then(() => {
                    // v1.5.0+
                    // success!
                })
                .catch((err) => {
                    // v1.5.0+
                    // oh, no!!!
                });
        },
        handleMaxWin() {
            // this.isShow = false;
            this.$q.fullscreen
                .request()
                .then(() => {
                    console.log(this.$refs);
                })
                .catch((err) => {
                    // v1.5.0+
                    // oh, no!!!
                });
        },
        handleUploadDialog() {
            this.isUploadDialog = true;
        }

    }
}
</script>
